import 'dart:math';

import 'package:flutter/material.dart';

class TopBackground extends StatefulWidget {
  TopBackground({Key key}) : super(key: key);

  @override
  _TopBackgroundState createState() => _TopBackgroundState();
}

class _TopBackgroundState extends State<TopBackground>
    with SingleTickerProviderStateMixin {
  List<Color> _colors = [Color(0xFFE0647B), Color(0xFFFCDD89)];
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
        lowerBound: -1,
        upperBound: 1, //定义动画控制的范围
        duration: Duration(seconds: 10),
        value: 0,
        vsync: this);
    _animationController.repeat();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('canvas背景'),
      ),
      body: Stack(
        children: [
          AnimatedBuilder(
              animation: _animationController,
              builder: (BuildContext context, Widget child) {
                return ClipPath(
                  clipper: CustomerHandlePath(_animationController.value),
                  child: Container(
                    height: 300,
                    decoration: BoxDecoration(
                        gradient: LinearGradient(
                            colors: _colors,
                            begin: Alignment.topLeft,
                            end: Alignment.bottomRight)),
                  ),
                );
              }),
          Positioned(
              top: 200,
              left: 20,
              child: Text(
                'fasdfa',
                style: TextStyle(color: Colors.green),
              ))
        ],
      ),
    );
  }
}

class CustomerHandlePath extends CustomClipper<Path> {
  double progress;
  CustomerHandlePath(this.progress);
  //定义裁剪规则
  @override
  getClip(Size size) {
    Path path = Path();
    path.moveTo(0, 0);
    path.lineTo(0, size.height * 0.8);

    //修改控制点
    double controllerX =
        size.width * 0.5 + (size.width * 0.6 + 1) * sin(progress * pi);
    double controllerY = size.height * 0.8 + 70 * cos(progress * pi);
    // 构建二阶曲线
    path.quadraticBezierTo(
        //控制点
        // size.width / 2,
        // size.height * 0.8,
        controllerX,
        controllerY,
        //结束点
        size.width,
        size.height * 0.8);
    path.lineTo(size.width, 0);
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper oldClipper) {
    return true;
  }
}
